<script setup>
import { onBeforeUnmount, ref, onMounted } from 'vue';
// 轮播路径
const carouselArr = ref([
  { url: '/src/assets/HomePageImg/ForumIndeximg/01.jpg' },
  { url: '/src/assets/HomePageImg/ForumIndeximg/02.png' },
  { url: '/src/assets/HomePageImg/ForumIndeximg/03.jpg' },
  { url: '/src/assets/HomePageImg/ForumIndeximg/04.jpg' },
])
const hotList = ref(["搜索热门话题", "热门话题", "热门话题", "热门话题",
  "搜索热门话题", "热门话题", "热门话题", "热门话题"])
// 控制搜索记录
const history = ref(false);
const InputItem = ref('');
// 控制搜索框是否吸顶
const Controsea=ref(false)
// 记录搜索记录
const historyList = ref([]);
const searchInputRef = ref(null);
const historyContainerRef = ref(null);
// 挂载完成后
onMounted(() => {
  // 添加全局点击事件监听器
  document.addEventListener('click', handleClickOutside);
  // localStorage.removeItem("historyList");
  //   historyList.value=[];
  // 从本地存储加载历史记录
  const savedHistory = localStorage.getItem('historyList');
  console.log('Loaded historyList from localStorage:', historyList.value);
  if (savedHistory) {
    historyList.value = JSON.parse(savedHistory);
  } else {
    // 如果没有保存的历史记录，则初始化为空数组
    historyList.value = [];
  }
  // 监听滚动事件
   window.addEventListener('scroll', handleScroll);


})
// 组件卸载前移除监听滚动条
onBeforeUnmount(() => {
  // 移除全局点击事件监听器
  document.removeEventListener('click', handleClickOutside);
  // 移除滚动事件监听器
   window.removeEventListener('scroll', handleScroll);
})
// 输入框的点击事件
const ControInput = () => {
  history.value = true;
}
const handleClickOutside = (event) => {
  // 获取输入框和历史记录容器的DOM元素
  const searchInput = searchInputRef.value?.$el;
  // 获取历史记录容器的DOM元素
  const historyContainer = historyContainerRef.value;
  // 检查点击是否发生在输入框或历史记录容器之外
  if (
    searchInput && !searchInput.contains(event.target) &&
    (!historyContainer || !historyContainer.contains(event.target))
  ) {
    history.value = false
  }
};
// 搜索框的点击事件
const searContrl = () => {
  if (InputItem.value && !historyList.value.includes(InputItem.value)) {
    historyList.value.push(InputItem.value)
    console.log("historyList:", historyList.value);
    // 将记录保存到本地存储
    localStorage.setItem("historyList", JSON.stringify(historyList.value));
    InputItem.value = '';
  } else {

  }

}
// 点击删除全部搜索记录
const deleteAll = () => {
  localStorage.removeItem("historyList");
  historyList.value = [];
}
// 选择历史记录
const selectHistory = (history) => {
  InputItem.value = history;
};
// 点击删除指定的搜索记录
const deleteFun = (index, event) => {
  //阻止事件冒泡
  event.stopPropagation();
  historyList.value.splice(index, 1);
  localStorage.setItem('historyList', JSON.stringify(historyList.value));
}
// 滚动监听事件
const handleScroll=()=>{
  const Rollheight = window.scrollY;
  if(Rollheight>=100){
    Controsea.value=true;
    // console.log(Controsea.value);
  }else{
    Controsea.value=false;
  }
}
</script>
<template>
  <div class="head">
    <div id="search" :class="{ 'search2':Controsea}">
      <div class="logo-box">
        <span class="logo">GigGo</span>
        <span class="LogoText">接单吧</span>
      </div>
      <div class="search-input-box">
        <div>
          <el-input @click="ControInput" :clearable=true v-model="InputItem" placeholder="搜索热门话题" class="search-input"
            ref="searchInputRef" />
        </div>
        <div class="search-btn">
          <img style="width:20px;height:20px;" src="/src/assets/HomePageImg/ForumIndeximg/搜索图标.png" alt="">
          <span @click="searContrl" style="font-size:20px;margin-left:10px;">搜索</span>
        </div>
      </div>
      <!-- 历史浏览 -->
      <div class="history-box" v-show="history" ref="historyContainerRef">
        <div class="history-title">历史浏览 </div>
        <div class="clear-all">
          <span style="margin-right: 10px;" @click="deleteAll">清除全部</span>
        </div>
        <ul class="history-list">
          <li v-for="(history, index) in historyList" :key="index" class="history-item" @click="selectHistory(history)">
            <span class="history-text">{{ history }}</span>
            <!--  -->
            <i class="iconfont icon-jiufuqianbaoicon08" @click="deleteFun(index, $event)"></i>
          </li>
        </ul>
        <div class="history-title">
          <span>热门推荐</span>
          <ul class="history-list">
            <li v-for="(item, index) in hotList" :key="index" class="history-item">
              <span class="history-text">{{ item }}</span>
            </li>
          </ul>
        </div>

      </div>
    </div>
    <!--  -->
    <div class="block text-center" m="t-4">
      <el-carousel trigger="click" height="400px">
        <el-carousel-item v-for="item in carouselArr" :key="item">
          <img class="small" :src="item.url" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--  -->
    <div class="hot_topic">
      <div style="margin:auto; text-align: center;
      font-size:30px;font-weight:600;">帖子分类</div>
      <!--  -->
      <el-tabs class="demo-tabs">
        <el-tab-pane label="求助咨询帖">
          <ul class="el-tab-pane-ul">
            <li v-for="(item, index) in 2" :key="index">
              <a href="">{{ index + 1 }}.如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
            <div class="example-pagination-block">
              <el-pagination layout="prev, pager, next" :total="80" />
            </div>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="技能交换帖">
          <ul class="el-tab-pane-ul">
            <li>
              <a href="">如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="广告推广帖">
          <ul class="el-tab-pane-ul">
            <li>
              <a href="">如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="活动公告帖">
          <ul class="el-tab-pane-ul">
            <li>
              <a href="">如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="经验分享帖">
          <ul class="el-tab-pane-ul">
            <li>
              <a href="">如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="求职简历帖">
          <ul class="el-tab-pane-ul">
            <li>
              <a href="">如何高效完成兼职任务？</a>
              <span>by <a href="/user/john">John Doe</a></span>
              <span>1天前</span>
              <span>123回复</span>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="hot_topic_box">
      <div class="hot-posts">
        <h2>热门帖子</h2>
        <ul>
          <li>
            <a href="/post/1">如何高效完成兼职任务？</a>
            <span>by <a href="/user/john">John Doe</a></span>
            <span>1天前</span>
            <span>123回复</span>
          </li>
          <li>
            <a href="/post">兼职经验分享：如何平衡工作和学习？</a>
            <span>by <a href="/user/jane">Jane Smith</a></span>
            <span>2天前</span>
            <span>89回复</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style scoped>
element.style {
  height: 300px;
}
.head {
  width: 100%;
  height:1500px;
}

.el-carousel__item h3 {
  color: #cdcecf;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #4d7dc0;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #990b2a;
}

.small {
  width: 100%;
  object-fit: cover;
}

.block {
  width: 1200px;
  margin: auto;
  margin-top:150px;
}

#search {
  width:1200px;
  height: 70px;
  background-color:white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position:fixed;
  top:70px;
  z-index:999;
}
/* .search2{
 position:fixed;
 top:70px;
 z-index:999;
} */
.search-input-box {
  height: 50px;
  background-color: #00B4B3;
  display: flex;
  align-items: center;
}

.search-input {
  width: 400px;
  height: 45px;
  border-radius: 50px;
  margin-left: 3px;
}

.search-btn {
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-weight: 600;
  background-color: #00B4B3;
  color: white;
}

.search-btn:hover {
  cursor: pointer;
}

.logo-box {
  color: #00B4B3;
  font-weight: 600;
}

.logo {
  font-size: 30px;
}

.LogoText {
  font-size: 16px;
}

.history-box {
  position: absolute;
  top: 70px;
  right: 210px;
  z-index: 999;
  width: 400px;
  background-color: white;
  border-radius: 20px;
  padding:20px;
}
.history-list {
  width: 100%;
  padding: 0px;
  /* border: 1px solid red; */
  display: flex;
  flex-wrap: wrap;
}

.history-item {
  /* 去除li的默认点*/
  list-style: none;
  margin-left: 10px;
  border-radius: 15px;
  border: 1px solid gray;
  margin-bottom: 10px;
  padding: 2px 8px;
}

.history-text:hover {
  cursor: pointer;
  color: #00B4B3;
}

.clear-all {
  width: 100%;
  display: flex;
  justify-content: end;
  font-size: 16px;
  font-weight: 600;
}

.clear-all span:hover {
  color: red;
  cursor: pointer;
}

.icon-jiufuqianbaoicon08 {
  font-size: 12px;
  margin-left: 5px;
}

.icon-jiufuqianbaoicon08:hover {
  cursor: pointer;
  color: red;
}

.hot_topic {
  width: 100%;
  margin-top: 20px;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
:deep().el-tabs {
  margin-top:50px;
}
:deep() .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content:space-around;
  /* background-color: yellow; */
}
:deep().el-tabs__item{
  font-size: 18px;
  font-weight:600;
}
.el-tab-pane-ul {
  list-style: none;
  font-size: 23px;
  /*设置行高 */
  line-height: 50px;
}

.example-pagination-block+.example-pagination-block {
  margin-top: 10px;
}

.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
.example-pagination-block{
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
:deep().el-icon svg{
  width:20px;
  height:20px;
}
:deep().el-pager .number{
  font-size:20px;
}
</style>